<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="dialogConfig.dialogType === 'edit' ? '修改档案' : '新增家庭档案'"
    :visible.sync="dialogVisible"
    width="90%"
    :before-close="addDialogClosed"
  >
    <div class="family">
      <h3>家庭信息表</h3>
      <table
        width="100%"
        border="1"
        align="center"
        readonly="true"
        cellpadding="0"
        cellspacing="0"
        bordercolor="#000000"
        style="BORDER-COLLAPSE: collapse"
      >
        <tbody>
          <tr>
            <td height="24" align="center" class="font_weight">
              家庭住址<font color="red">*</font>
            </td>
            <td style="border-right:none;border-left:none;">
              <div id="bb">
                <input id="hdsa0002005f" type="hidden" name="" value="" />

                <div
                  id="ext-gen3"
                  class="x-form-field-wrap x-form-field-trigger-wrap"
                  style="width: 350px;"
                >
                  <input
                    id="hdsa0002005"
                    type="text"
                    size="16"
                    autocomplete="off"
                    name="hdsa0002.hdsa0002005"
                    class=" x-form-text x-form-field x-trigger-noedit x-form-invalid"
                    readonly=""
                    style="width: 333px;"
                  />
                </div>
              </div>
            </td>

            <td style="border-right:none;border-left:none;">
              <div id="t8">
                <input
                  id="hdsa0002007"
                  type="text"
                  size="20"
                  autocomplete="off"
                  name="hdsa0002.hdsa0002007"
                  class="x-form-text x-form-field"
                  style="width: 160px;"
                />
              </div>
              <input id="hdsa0002007f" type="hidden" name="" value="" />

              <input id="hdsa0002018old" type="hidden" value="" />
            </td>
            <td
              style="border-right:none;border-left:none;"
              align="center"
              width="12%"
            >
              ( 门牌号码/组 )
            </td>
            <td style="border-right:none;border-left:none;" />
            <td style="border-right:none;border-left:none;" />
            <td style="border-left:none;" />
          </tr>
          <tr>
            <td height="24" align="center" class="font_weight">
              户主姓名<font color="red">*</font>
            </td>
            <td colspan="2" style="border-right:none;">
              <div id="t5">
                <input
                  id="hdsa0002003"
                  type="text"
                  size="20"
                  autocomplete="off"
                  name="hdsa0002.hdsa0002003"
                  class=" x-form-text x-form-field x-form-invalid"
                />
              </div>
              <input id="hdsa0002003f" type="hidden" name="" value="" />
            </td>
            <td style="border-left:none;border-right:none;" />
            <td style="border-left:none;border-right:none;" />
            <td align="center" class="font_weight">
              户主身份证<font color="red">*</font>
            </td>
            <td>
              <div id="cc">
                <input
                  id="hdsa0002018"
                  type="text"
                  size="20"
                  autocomplete="off"
                  name="hdsa0002.hdsa0002018"
                  class="x-form-text x-form-field"
                  style="width: 160px;"
                />
              </div>
              <input id="hdsa0002018f" type="hidden" name="" value="" />
            </td>
          </tr>
          <tr>
            <td height="24" align="center" class="font_weight">
              家庭人口数<font color="red">*</font>
            </td>
            <td colspan="2" style="border-right:none;">
              <div id="t10">
                <input
                  id="hdsa0002008"
                  type="text"
                  size="20"
                  autocomplete="off"
                  name="hdsa0002.hdsa0002008"
                  class=" x-form-text x-form-field x-form-num-field x-form-invalid"
                />
              </div>
              <input id="hdsa0002008f" type="hidden" name="" value="" />
            </td>
            <td style="border-left:none;border-right:none;" />
            <td style="border-left:none;border-right:none;" />
            <td align="center">联系电话</td>
            <td>
              <div id="ee">
                <input
                  id="hdsa0002004"
                  type="text"
                  size="20"
                  autocomplete="off"
                  name="hdsa0002.hdsa0002004"
                  class="x-form-text x-form-field"
                  style="width: 160px;"
                />
              </div>
              <input id="hdsa0002004f" type="hidden" name="" value="" />
            </td>
          </tr>
          <tr>
            <td width="20%" height="24" align="center" class="font_weight">
              建档日期<font color="red">*</font>
            </td>
            <td colspan="2" style="border-right:none;">
              <div id="dd" style="border-right:none;">
                <div
                  id="ext-gen5"
                  class="x-form-field-wrap x-form-field-trigger-wrap"
                  style="width: 120px;"
                >
                  <input
                    id="hdsa0002009"
                    type="text"
                    size="10"
                    autocomplete="off"
                    name="hdsa0002.hdsa0002009"
                    class="x-form-text x-form-field x-form-invalid"
                    style="width: 103px;"
                  />
                </div>
              </div>
              <input id="hdsa0002009f" type="hidden" value="" />
            </td>
            <td style="border-left:none;border-right:none;" />
            <td style="border-left:none;border-right:none;" />
            <td width="20%" align="center" class="font_weight">
              家庭档案号<font color="red">*</font>
            </td>
            <td width="20%">
              <div id="jtbh">
                <input
                  id="hdsa0002002"
                  type="text"
                  size="20"
                  autocomplete="off"
                  name="hdsa0002.hdsa0002002"
                  class=" x-form-text x-form-field x-form-invalid"
                  style="width: 160px;"
                />
              </div>
              <input id="hdsa0002002f" type="hidden" name="" value="" />

              <input id="hdsa0002002old" type="hidden" value="" />
            </td>
          </tr>
          <tr>
            <td align="center">家庭详细地址</td>
            <td colspan="4" style="border-right:none;border-left:none;">
              <div id="t11">
                <input
                  id="hdsa0002020"
                  type="text"
                  size="20"
                  autocomplete="off"
                  name="hdsa0002.hdsa0002020"
                  class="x-form-text x-form-field"
                  style="width: 160px;"
                />
              </div>
              <input id="hdsa0002020f" type="hidden" name="" value="" />
            </td>
            <td style="border-right:none;border-left:none;" />
            <td style="border-left:none;" />
          </tr>
          <tr>
            <td rowspan="6" align="center">生活环境</td>
          </tr>
          <tr>
            <td width="20%" align="left">厨房排风设施</td>
            <td colspan="5" style="border-right:none;">
              <input
                id="hdsa000201007"
                type="hidden"
                name="hdsa000201.hdsa000201007"
                value=""
              />

              <input
                id="hdsa000201.hdsa000201008-1"
                type="checkbox"
                name="hdsa000201.hdsa000201008"
                value="0"
                onclick="checkedThis(this,'hdsa000201.hdsa000201008','hdsa000201.hdsa000201008','hdsa000201007')"
              />
              <label for="hdsa000201.hdsa000201008-1" class="checkboxLabel"
                >无</label
              >
              <input
                id="hdsa000201.hdsa000201008-2"
                type="checkbox"
                name="hdsa000201.hdsa000201008"
                value="1"
                checked="checked"
                onclick="checkedThis(this,'hdsa000201.hdsa000201008','hdsa000201.hdsa000201008','hdsa000201007')"
              />
              <label for="hdsa000201.hdsa000201008-2" class="checkboxLabel"
                >油烟机</label
              >
              <input
                id="hdsa000201.hdsa000201008-3"
                type="checkbox"
                name="hdsa000201.hdsa000201008"
                value="2"
                onclick="checkedThis(this,'hdsa000201.hdsa000201008','hdsa000201.hdsa000201008','hdsa000201007')"
              />
              <label for="hdsa000201.hdsa000201008-3" class="checkboxLabel"
                >换风扇</label
              >
              <input
                id="hdsa000201.hdsa000201008-4"
                type="checkbox"
                name="hdsa000201.hdsa000201008"
                value="3"
                onclick="checkedThis(this,'hdsa000201.hdsa000201008','hdsa000201.hdsa000201008','hdsa000201007')"
              />
              <label for="hdsa000201.hdsa000201008-4" class="checkboxLabel"
                >烟囱</label
              >
            </td>
            <td style="border-right:none;border-left:none;" />
            <td style="border-left:none;" />
          </tr>
          <tr>
            <td align="left">燃料类型</td>
            <td colspan="5" style="border-right:none;">
              <input
                id="hdsa000201003"
                type="hidden"
                name="hdsa000201.hdsa000201003"
                value=""
              />

              <input
                id="hdsa000201.hdsa000201006-1"
                type="checkbox"
                name="hdsa000201.hdsa000201006"
                value="0"
                onclick="checkedThis(this,'hdsa000201.hdsa000201006','hdsa000201.hdsa000201006','hdsa000201003')"
              />
              <label for="hdsa000201.hdsa000201006-1" class="checkboxLabel"
                >液化气</label
              >
              <input
                id="hdsa000201.hdsa000201006-2"
                type="checkbox"
                name="hdsa000201.hdsa000201006"
                value="1"
                onclick="checkedThis(this,'hdsa000201.hdsa000201006','hdsa000201.hdsa000201006','hdsa000201003')"
              />
              <label for="hdsa000201.hdsa000201006-2" class="checkboxLabel"
                >煤</label
              >
              <input
                id="hdsa000201.hdsa000201006-3"
                type="checkbox"
                name="hdsa000201.hdsa000201006"
                value="2"
                checked="checked"
                onclick="checkedThis(this,'hdsa000201.hdsa000201006','hdsa000201.hdsa000201006','hdsa000201003')"
              />
              <label for="hdsa000201.hdsa000201006-3" class="checkboxLabel"
                >天然气</label
              >
              <input
                id="hdsa000201.hdsa000201006-4"
                type="checkbox"
                name="hdsa000201.hdsa000201006"
                value="3"
                onclick="checkedThis(this,'hdsa000201.hdsa000201006','hdsa000201.hdsa000201006','hdsa000201003')"
              />
              <label for="hdsa000201.hdsa000201006-4" class="checkboxLabel"
                >沼气</label
              >
              <input
                id="hdsa000201.hdsa000201006-5"
                type="checkbox"
                name="hdsa000201.hdsa000201006"
                value="4"
                onclick="checkedThis(this,'hdsa000201.hdsa000201006','hdsa000201.hdsa000201006','hdsa000201003')"
              />
              <label for="hdsa000201.hdsa000201006-5" class="checkboxLabel"
                >柴火</label
              >
              <input
                id="hdsa000201.hdsa000201006-6"
                type="checkbox"
                name="hdsa000201.hdsa000201006"
                value="5"
                onclick="checkedThis(this,'hdsa000201.hdsa000201006','hdsa000201.hdsa000201006','hdsa000201003')"
              />
              <label for="hdsa000201.hdsa000201006-6" class="checkboxLabel"
                >其他</label
              >
            </td>
            <td style="border-right:none;border-left:none;" />
            <td style="border-left:none;" />
          </tr>
          <tr>
            <td align="left">饮水</td>
            <td colspan="5" style="border-right:none;">
              <input
                id="hdsa000201001"
                type="hidden"
                name="hdsa000201.hdsa000201001"
                value=""
              />

              <input
                id="hdsa000201.hdsa000201002-1"
                type="checkbox"
                name="hdsa000201.hdsa000201002"
                value="0"
                checked="checked"
                onclick="checkedThis(this,'hdsa000201.hdsa000201002','hdsa000201.hdsa000201002','hdsa000201001')"
              />
              <label for="hdsa000201.hdsa000201002-1" class="checkboxLabel"
                >自来水</label
              >
              <input
                id="hdsa000201.hdsa000201002-2"
                type="checkbox"
                name="hdsa000201.hdsa000201002"
                value="1"
                onclick="checkedThis(this,'hdsa000201.hdsa000201002','hdsa000201.hdsa000201002','hdsa000201001')"
              />
              <label for="hdsa000201.hdsa000201002-2" class="checkboxLabel"
                >经净化过滤的水</label
              >
              <input
                id="hdsa000201.hdsa000201002-3"
                type="checkbox"
                name="hdsa000201.hdsa000201002"
                value="2"
                onclick="checkedThis(this,'hdsa000201.hdsa000201002','hdsa000201.hdsa000201002','hdsa000201001')"
              />
              <label for="hdsa000201.hdsa000201002-3" class="checkboxLabel"
                >井水</label
              >
              <input
                id="hdsa000201.hdsa000201002-4"
                type="checkbox"
                name="hdsa000201.hdsa000201002"
                value="3"
                onclick="checkedThis(this,'hdsa000201.hdsa000201002','hdsa000201.hdsa000201002','hdsa000201001')"
              />
              <label for="hdsa000201.hdsa000201002-4" class="checkboxLabel"
                >河湖水</label
              >
              <input
                id="hdsa000201.hdsa000201002-5"
                type="checkbox"
                name="hdsa000201.hdsa000201002"
                value="4"
                onclick="checkedThis(this,'hdsa000201.hdsa000201002','hdsa000201.hdsa000201002','hdsa000201001')"
              />
              <label for="hdsa000201.hdsa000201002-5" class="checkboxLabel"
                >塘水</label
              >
              <input
                id="hdsa000201.hdsa000201002-6"
                type="checkbox"
                name="hdsa000201.hdsa000201002"
                value="5"
                onclick="checkedThis(this,'hdsa000201.hdsa000201002','hdsa000201.hdsa000201002','hdsa000201001')"
              />
              <label for="hdsa000201.hdsa000201002-6" class="checkboxLabel"
                >其他</label
              >
            </td>
            <td style="border-right:none;border-left:none;" />
            <td style="border-left:none;" />
          </tr>
          <tr>
            <td align="left">厕所</td>
            <td colspan="5" style="border-right:none;">
              <input
                id="hdsa000201005"
                type="hidden"
                name="hdsa000201.hdsa000201005"
                value=""
              />

              <input
                id="hdsa000201.hdsa000201004-1"
                type="checkbox"
                name="hdsa000201.hdsa000201004"
                value="0"
                onclick="checkedThis(this,'hdsa000201.hdsa000201004','hdsa000201.hdsa000201004','hdsa000201005')"
              />
              <label for="hdsa000201.hdsa000201004-1" class="checkboxLabel"
                >卫生厕所</label
              >
              <input
                id="hdsa000201.hdsa000201004-2"
                type="checkbox"
                name="hdsa000201.hdsa000201004"
                value="1"
                onclick="checkedThis(this,'hdsa000201.hdsa000201004','hdsa000201.hdsa000201004','hdsa000201005')"
              />
              <label for="hdsa000201.hdsa000201004-2" class="checkboxLabel"
                >一格或二格粪池式</label
              >
              <input
                id="hdsa000201.hdsa000201004-3"
                type="checkbox"
                name="hdsa000201.hdsa000201004"
                value="2"
                checked="checked"
                onclick="checkedThis(this,'hdsa000201.hdsa000201004','hdsa000201.hdsa000201004','hdsa000201005')"
              />
              <label for="hdsa000201.hdsa000201004-3" class="checkboxLabel"
                >马桶</label
              >
              <input
                id="hdsa000201.hdsa000201004-4"
                type="checkbox"
                name="hdsa000201.hdsa000201004"
                value="3"
                onclick="checkedThis(this,'hdsa000201.hdsa000201004','hdsa000201.hdsa000201004','hdsa000201005')"
              />
              <label for="hdsa000201.hdsa000201004-4" class="checkboxLabel"
                >露天粪坑</label
              >
              <input
                id="hdsa000201.hdsa000201004-5"
                type="checkbox"
                name="hdsa000201.hdsa000201004"
                value="4"
                onclick="checkedThis(this,'hdsa000201.hdsa000201004','hdsa000201.hdsa000201004','hdsa000201005')"
              />
              <label for="hdsa000201.hdsa000201004-5" class="checkboxLabel"
                >简易棚厕</label
              >
            </td>
            <td style="border-right:none;border-left:none;" />
            <td style="border-left:none;" />
          </tr>
          <tr>
            <td align="left">禽畜栏</td>
            <td colspan="5" style="border-right:none;">
              <input
                id="hdsa000201009"
                type="hidden"
                name="hdsa000201.hdsa000201009"
                value=""
              />

              <input
                id="hdsa000201.hdsa000201010-1"
                type="checkbox"
                name="hdsa000201.hdsa000201010"
                value="0"
                onclick="checkedThis(this,'hdsa000201.hdsa000201010','hdsa000201.hdsa000201010','hdsa000201009')"
              />
              <label for="hdsa000201.hdsa000201010-1" class="checkboxLabel"
                >无</label
              >
              <input
                id="hdsa000201.hdsa000201010-2"
                type="checkbox"
                name="hdsa000201.hdsa000201010"
                value="1"
                onclick="checkedThis(this,'hdsa000201.hdsa000201010','hdsa000201.hdsa000201010','hdsa000201009')"
              />
              <label for="hdsa000201.hdsa000201010-2" class="checkboxLabel"
                >单设</label
              >
              <input
                id="hdsa000201.hdsa000201010-3"
                type="checkbox"
                name="hdsa000201.hdsa000201010"
                value="2"
                onclick="checkedThis(this,'hdsa000201.hdsa000201010','hdsa000201.hdsa000201010','hdsa000201009')"
              />
              <label for="hdsa000201.hdsa000201010-3" class="checkboxLabel"
                >室内</label
              >
              <input
                id="hdsa000201.hdsa000201010-4"
                type="checkbox"
                name="hdsa000201.hdsa000201010"
                value="3"
                onclick="checkedThis(this,'hdsa000201.hdsa000201010','hdsa000201.hdsa000201010','hdsa000201009')"
              />
              <label for="hdsa000201.hdsa000201010-4" class="checkboxLabel"
                >室外</label
              >
            </td>
            <td style="border-right:none;border-left:none;" />
            <td style="border-left:none;" />
          </tr>
        </tbody>
      </table>
    </div>
    <div class="family">
      <h3>家庭成员</h3>
      <table
        width="100%"
        border="1"
        align="center"
        cellpadding="0"
        cellspacing="0"
        bordercolor="#000000"
        style="BORDER-COLLAPSE: collapse"
      >
        <tbody>
          <tr>
            <td align="center">姓名</td>
            <td align="center">性别</td>
            <td align="center">出生日期</td>
            <td align="center">身份证号</td>
            <td align="center">家庭关系</td>
          </tr>

          <tr>
            <td align="center">
              <a href="javascript:jtryToDall('42900510120900049')">张道文</a>
            </td>
            <td align="center">男</td>
            <td align="center">1963-04-11</td>
            <td align="center">422429196304115432</td>
            <td align="center">本人</td>
          </tr>

          <tr>
            <td align="center">
              <a href="javascript:jtryToDall('42900510120900050')">袁爱新</a>
            </td>
            <td align="center">女</td>
            <td align="center">1966-04-30</td>
            <td align="center">422429196604305449</td>
            <td align="center">配偶</td>
          </tr>

          <tr>
            <td align="center">
              <a href="javascript:jtryToDall('42900510120900051')">张杰</a>
            </td>
            <td align="center">男</td>
            <td align="center">1987-03-03</td>
            <td align="center">429005198703035256</td>
            <td align="center">子</td>
          </tr>

          <tr>
            <td align="center">
              <a href="javascript:jtryToDall('42900510120900052')">张勇</a>
            </td>
            <td align="center">男</td>
            <td align="center">1990-07-02</td>
            <td align="center">429005199007025219</td>
            <td align="center">子</td>
          </tr>

          <tr>
            <td align="center">
              <a href="javascript:jtryToDall('42900510120900053')">李银香</a>
            </td>
            <td align="center">女</td>
            <td align="center">1938-01-17</td>
            <td align="center">422429193801175440</td>
            <td align="center">父母</td>
          </tr>

          <tr>
            <td align="center">
              <a href="javascript:jtryToDall('42900510120901241')">张诗昂</a>
            </td>
            <td align="center">男</td>
            <td align="center">2011-09-28</td>
            <td align="center">429005201109285214</td>
            <td align="center">其他</td>
          </tr>

          <tr>
            <td align="center">
              <a href="javascript:jtryToDall('42900510120901242')">王雅莉</a>
            </td>
            <td align="center">女</td>
            <td align="center">1991-02-21</td>
            <td align="center">429005199102215248</td>
            <td align="center">其他</td>
          </tr>
        </tbody>
      </table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addDialogClosed">取 消</el-button>
      <el-button type="primary" @click="submitHandle('ruleForm')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { validatePhone } from "@/simdata/validate.js"
// 手机号的验证
const checkPhone = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("手机号不能为空"))
  } else {
    if (validatePhone(value)) {
      callback()
    } else {
      return callback(new Error("请输入正确的手机号"))
    }
  }
}
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogConfig: {
      type: Object,
      default: () => ({
        title: "",
        dialogType: "new"
      })
    }
  },
  data() {
    return {
      model: {
        name: "", // 姓名
        identityNumber: "", // 身份证
        population: "",
        phonenumber: "",
        createDate: "",
        number: "",
        nowAddress: "",
        HouseNumber: "",
        detailedAddress: "", // 详细地址
        exhaust: [] // 厨房排风设施
      },
      rules: {
        name: [{ required: true, message: "请输入户主姓名", trigger: "blur" }],
        identityNumber: [
          { required: true, message: "请输入户主身份证", trigger: "blur" }
        ],
        population: [
          { required: true, message: "请输入家庭人口数", trigger: "blur" }
        ],
        phonenumber: [
          { required: true, validator: checkPhone, trigger: "blur" }
        ],
        createDate: [
          { required: true, message: "请选择建档日期", trigger: "blur" }
        ],
        number: [
          { required: true, message: "请输入家庭档案号", trigger: "blur" }
        ],
        nowAddress: [
          { required: true, message: "请输入家庭住址", trigger: "blur" }
        ],
        HouseNumber: [
          { required: true, message: "请输入门牌号码/组", trigger: "blur" }
        ]
      },
      // 配置的表单
      formItemList: [
        {
          type: "Input",
          label: "户主姓名",
          prop: "name",
          span: 12,
          placeholder: ""
        },
        {
          type: "Input",
          label: "户主身份证",
          prop: "identityNumber",
          span: 12,
          classType: "IdCard",
          placeholder: ""
        },
        {
          type: "Input",
          label: "家庭人口数",
          prop: "population",
          span: 12,
          placeholder: ""
        },
        {
          type: "Input",
          label: "联系电话",
          prop: "phonenumber",
          span: 12,
          placeholder: ""
        },
        {
          type: "data",
          label: "建档日期",
          prop: "createDate",
          span: 12,
          placeholder: "请选择..."
        },
        {
          type: "Input",
          label: "家庭档案号",
          prop: "number",
          span: 12,
          placeholder: ""
        },
        {
          type: "Input",
          label: "家庭住址",
          prop: "nowAddress",
          span: 12,
          placeholder: ""
        },
        {
          type: "Input",
          label: "门牌号码/组",
          prop: "HouseNumber",
          span: 12,
          placeholder: ""
        },
        {
          type: "Input",
          label: "家庭详细地址",
          prop: "detailedAddress",
          span: 24,
          placeholder: ""
        },
        {
          // 多选框
          type: "Checkbox",
          label: "厨房排风设施",
          prop: "exhaust",
          span: 24,
          option: [
            { label: "无", value: "1" },
            { label: "油烟机", value: "2" },
            { label: "换风扇", value: "3" },
            { label: "烟囱", value: "4" }
          ],
          placeholder: ""
        }
      ]
    }
  },
  methods: {
    // 关闭弹框
    addDialogClosed() {
      this.$emit("update:dialogVisible", false)
      // this.resetForm()
    },
    // 确定提交
    submitHandle(formName) {
      this.$refs[formName].validate(valid => {
        console.log(valid)
        if (valid) {
          console.log("提交")
          this.addDialogClosed()
        } else {
          return false
        }
      })
    },
    // 重置表单
    resetForm() {
      this.$refs["ruleForm"].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__body {
  padding: 8px 20px;
}

.family {
  margin-top: 40px;
  h3 {
    text-align: center;
  }
}
</style>
